<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/rear-end/index' }"
				>首页</el-breadcrumb-item
			>
			<el-breadcrumb-item>数据统计</el-breadcrumb-item>
			<el-breadcrumb-item>商品销售量</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<div ref="main" style="width: 100%;height: 80vh"></div>
		</el-card>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	export default {
		created() {
            this.do()
            this.$nextTick(() => {
				this.myChart = echarts.init(this.$refs.main)  
            })
             
		},
		data() {
			return {
				option: {
					title: {
						text: '商品销售量',
						subtext: '啥快递就',
						left: '60%',
						top:'10%'
						
					},
					tooltip: {
						trigger: 'item',
					},
					legend: {
						orient: 'vertical',
                        left: 'left'
					},
					series: [
						{
							name: '销售量',
							type: 'pie',
							radius: '50%',
                            left:"40%",
							data: [],
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)',
								},
							},
						},
					],
				},
                myChart:'',
			}
		},
		methods: {
			async do() {
				//商品信息
				let figures = await this.$api.sort.getGoods()
                var t=[]
				figures.data.data.forEach((item) => {
                    let data={
                        value:item.quantitySold,
                        name:item.goodsName
                    }
					t.push(data)
				})
                this.option.series[0].data=t
                this.option && this.myChart.setOption(this.option)
				
			},
		},
	}
</script>

<style>

</style>